<template>
  <div id="container" />
</template>
<script>

export default {
  name: 'TengXunMap',
  components: {
  },
  props: {
  },
  data() {
    return {
      mapPage: null,
      mapCenter: null,
      defaultLng: null,
      defaultLat: null,
      isLoadMapLocation: false,
      locationPaths: [],
      locationMapPage: null
    }
  },
  mounted() {
    // 加载地图
    // this.getLoadMapPage();
  },
  methods: {
    // 初始化地图信息
    getLoadMapPage() {
      if (!this.defaultLat || !this.defaultLng || (this.defaultLat * 1) === 0 || (this.defaultLng * 1) === 0) {
        return false
      }
      // 定义地图中心点坐标
      this.mapCenter = new window.TMap.LatLng(this.defaultLat, this.defaultLng)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      this.mapPage = new window.TMap.Map(document.getElementById('container'), {
        center: this.mapCenter, // 设置地图中心点坐标
        zoom: 17.2 // 设置地图缩放级别
      })
      // 是否地图加载之后定位位置
      if (this.isLoadMapLocation) {
        this.loadMapLocationByPaths()
      }
    },
    // 加载位置定位
    loadMapLocationByPaths() {
      if (!this.locationPaths && this.locationPaths.length <= 0) {
        this.$message.error('请配置locationPaths属性值!')
        return false
      }
      const geometries = []
      for (let i = 0; i < this.locationPaths.length; i++) {
        geometries[i] = {}
        geometries[i].position = new window.TMap.LatLng(this.locationPaths[i].lat, this.locationPaths[i].lng)
      }
      // 在地图上标注车辆位置信息
      this.locationMapPage = new window.TMap.MarkerCluster({
        id: this.locationPaths.id,
        map: this.mapPage,
        enableDefaultStyle: true, // 启用默认样式
        minimumClusterSize: 2, // 形成聚合簇的最小个数
        geometries: geometries,
        zoomOnClick: true, // 点击簇时放大至簇内点分离
        gridSize: 60, // 聚合算法的可聚合距离
        averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
        maxZoom: 10 // 采用聚合策略的最大缩放级别
      })
    }
  }
}
</script>

<style scoped>
</style>
